'use client';

import React, { useState } from 'react';
import { DocumentTextIcon } from '@heroicons/react/24/outline';

interface ContentInputProps {
  content: string;
  onContentChange: (content: string) => void;
  placeholder?: string;
  maxLength?: number;
}

export function ContentInput({
  content,
  onContentChange,
  placeholder = "请输入您要转换的原始内容...",
  maxLength = 5000
}: ContentInputProps) {
  const [isFocused, setIsFocused] = useState(false);
  
  const remainingChars = maxLength - content.length;
  const isOverLimit = remainingChars < 0;

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-semibold flex items-center gap-2">
          <DocumentTextIcon className="w-5 h-5" />
          输入原始内容
        </h3>
        <div className={`text-sm ${isOverLimit ? 'text-red-500' : 'text-muted-foreground'}`}>
          {content.length} / {maxLength}
        </div>
      </div>
      
      <div className={`relative border border-border rounded-lg transition-colors ${
        isFocused ? 'border-primary' : ''
      }`}>
        <textarea
          value={content}
          onChange={(e) => onContentChange(e.target.value)}
          onFocus={() => setIsFocused(true)}
          onBlur={() => setIsFocused(false)}
          placeholder={placeholder}
          className="w-full p-4 border border-gray-200 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent min-h-[200px]"
          rows={8}
        />
        
        {content.length === 0 && (
          <div className="absolute top-4 left-4 text-muted-foreground pointer-events-none">
            <div className="flex items-center gap-2 text-sm">
              <span>💡</span>
              <span>支持文章、产品介绍、营销文案等各类内容转换</span>
            </div>
          </div>
        )}
      </div>
      
      {isOverLimit && (
        <div className="text-sm text-red-500 flex items-center gap-2">
          <span>⚠️</span>
          <span>内容长度超出限制，请删减 {Math.abs(remainingChars)} 个字符</span>
        </div>
      )}
      
      <ContentSuggestions onSelect={onContentChange} />
    </div>
  );
}

interface ContentSuggestionsProps {
  onSelect: (content: string) => void;
}

function ContentSuggestions({ onSelect }: ContentSuggestionsProps) {
  const suggestions = [
    {
      title: "产品推广文案",
      content: "我们的新产品具有革命性的技术创新，能够大幅提升用户体验。经过一年的研发投入，我们成功解决了行业内的核心痛点，为用户提供了更加便捷、高效的解决方案。"
    },
    {
      title: "技术分享文章",
      content: "在前端开发中，React Hooks的出现改变了我们编写组件的方式。通过使用useState和useEffect等钩子函数，我们可以在函数组件中管理状态和副作用，代码变得更加简洁和易于理解。"
    },
    {
      title: "生活分享内容",
      content: "今天尝试了一家新开的咖啡店，环境很棒，咖啡的味道也很不错。店主很用心地布置了每一个角落，营造出温馨舒适的氛围。推荐给喜欢安静环境工作或学习的朋友们。"
    }
  ];

  return (
    <div className="space-y-2">
      <h4 className="text-sm font-medium text-muted-foreground">示例内容（点击使用）</h4>
      <div className="grid gap-2">
        {suggestions.map((suggestion, index) => (
          <button
            key={index}
            onClick={() => onSelect(suggestion.content)}
            className="text-left p-3 border border-border rounded-lg hover:border-primary hover:bg-secondary/50 transition-colors"
          >
            <div className="font-medium text-sm">{suggestion.title}</div>
            <div className="text-xs text-muted-foreground mt-1 line-clamp-2">
              {suggestion.content}
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}